/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect} from 'react';
import {
  TabController,
  View,
  Colors,
  SegmentedControl,
  Image,
  Text,
  TouchableOpacity,
  Checkbox,
} from 'react-native-ui-lib';
import {connect} from 'react-redux';
import Input from '@/components/Input';
import {get} from '@/utils/request';
import {useRequest} from 'ahooks';
import List from '@/components/List';
import ProjectIcon from '@/components/ProjectIcon';
import Feather from 'react-native-vector-icons/Feather';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Filter from './Filter';

function Mission({appTheme, curProject, navigation}) {
  const [params, setParams] = useState({
    keyWord: null,
    projectTagIds: [],
    userIds: [],
    itemStatus: null,
    itemType: null,
  });

  const [dialog, setDialog] = useState({
    visible: false,
    //backgroundColor: Colors.primaryColor,
    onDismiss: () => {
      setDialog(s => ({
        ...s,
        visible: false,
      }));
    },
  });

  const [rerender, setRerender] = useState(true);

  let searchprops = {
    placeholder: '编号/标题',
    value: params?.keyWord,
    lefticon: 'search1',
    allowClear: true,
    onChange: val => {
      setParams(s => ({...s, keyWord: val}));
    },
    onSubmitEditing: async () => {
      //search
    },
    size: 'small',
    containwidth: '40%',
  };

  //格式化文档+前端筛选

  //接口
  const {data, refreshAsync, loading} = useRequest(
    async () => {
      let res = await get('/step', {
        ...params,
        projectId: curProject?.id,
      });
      return res?.data?.dataList;
    },
    {
      refreshDeps: [params, curProject],
    },
  );

  const extraprops = {
    refreshAsync,
    loading,
  };

  useEffect(() => {
    setRerender(false);
    setTimeout(() => {
      setRerender(true);
    }, 10);
  }, [appTheme]);

  return (
    <View
      flex-1
      style={{
        backgroundColor: Colors.backgroundColor,
      }}>
      <Filter
        dialog={dialog}
        setDialog={setDialog}
        setParams={setParams}
        params={params}
        curProject={curProject}
      />
      <View padding-12 paddingB-0 row center style={{gap: 10}}>
        <ProjectIcon />
        <Input
          {...searchprops}
          containerStyle={{flex: 1, backgroundColor: Colors.colorCardBg}}
        />

        <TouchableOpacity
          onPress={() => {
            setDialog(s => ({
              ...s,
              title: '筛选',
              visible: true,
            }));
          }}>
          <View
            width={33}
            height={33}
            center
            br30
            backgroundColor={Colors.colorCardBg}>
            <Feather
              name="menu"
              size={20}
              style={{color: Colors.colorTextBase}}
            />
          </View>
        </TouchableOpacity>
      </View>
      <View flex-1 top>
        {data?.length > 0 ? (
          <TabController
            items={
              data?.map?.(item => ({
                label: item?.name,
              })) ?? []
            }
            asCarousel={true}>
            {rerender && (
              <TabController.TabBar
                enableShadows
                spreadItems
                labelColor={Colors.colorTextBase}
                selectedLabelColor={Colors.primaryColor}
                indicatorStyle={{
                  backgroundColor: Colors.primaryColor,
                }}
                backgroundColor={Colors.backgroundColor}
              />
            )}
            <TabController.PageCarousel flex-1>
              {data?.map?.(item => (
                <TabController.TabPage key={item?.id} index={item?.id}>
                  <List
                    appTheme={appTheme}
                    data={item?.itemList ?? []}
                    head={true}
                    stepList={
                      data?.map(it => ({
                        label: it.name,
                        value: it.id,
                      })) ?? []
                    }
                    {...extraprops}
                  />
                </TabController.TabPage>
              ))}
            </TabController.PageCarousel>
          </TabController>
        ) : (
          <View center height={288} style={{gap: 24}}>
            <Text subheading>请选择您想要的项目</Text>
            <TouchableOpacity
              onPress={() => {
                navigation.navigate('Projects');
              }}>
              <View
                width={66}
                height={66}
                center
                br60
                backgroundColor={Colors?.colorCardBg}>
                <AntDesign
                  name="arrowright"
                  size={20}
                  style={{color: Colors?.colorTextBase}}
                />
              </View>
            </TouchableOpacity>
          </View>
        )}
      </View>
    </View>
  );
}
const mapStateToProps = state => {
  return {
    appTheme: state.appTheme,
    curProject: state.curProject,
  };
};

export default connect(mapStateToProps)(Mission);
